<!--
  ~ Copyright 2012-2019 the original author or authors.
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      https://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="shortcut icon" href="/static/favicon.ico">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="/static/bootstrap-4.2.1.min.css">
    <link rel="stylesheet" href="/static/css/bootstrap4-toggle.min.css">
    <link rel="stylesheet" href="/static/css/font-awesome.min.css">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="/static/jquery-3.3.1.slim.min.js"></script>
    <script src="/static/jquery-3.3.1.min.js"></script>
    <script src="/static/popper-1.14.6.min.js"></script>
    <script src="/static/bootstrap-4.2.1.min.js"></script>
    <!--    <script src="bootstrap-switch.min.js"></script>-->

    <script src="/static/bootstrap4-toggle.min.js"></script>

    <script type="text/javascript">
        window.addEventListener('resize', function () {
            var terminalSize = getTerminalSize();
            ws.send(JSON.stringify({action: 'resize', cols: terminalSize.cols, rows: terminalSize.rows}));
            xterm.resize(terminalSize.cols, terminalSize.rows);
        });
    </script>

    <link href="/static/xterm.css" rel="stylesheet"/>
    <link href="/static/main.css" rel="stylesheet"/>
    <script src="/static/xterm.js" type="text/javascript"></script>
    <script src="/static/xweb-console.js"></script>
    <script src="/static/arthas.js"></script>
    <style>
        .a-col {
            padding-right: 5px;
        }

        .toggle {
            width: 70px !important;
        }

        .toggle-off {
            color: white !important;
        }
    </style>
    <title>Arthas 控制台</title>
</head>

<body>
<nav class="navbar navbar-expand navbar-light bg-light flex-column flex-md-row bd-navbar">
    <a href="https://github.com/alibaba/arthas" target="_blank" title="" class="navbar-brand">
        <img src="/static/image/logo.png"
             alt="Arthas"
             title="Welcome to Arthas web console"
             style="height: 30px;"
             class="img-responsive"></a>
    <span class="navbar-version" style="font-size: 18px">v3.6.7</span>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <!--<ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="https://arthas.aliyun.com/doc" target="_blank">文档
                    <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="https://arthas.aliyun.com/doc/arthas-tutorials.html"
                   target="_blank">在线教程</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="https://github.com/shiyindaxiaojie/arthas" target="_blank">源码</a>
            </li>
        </ul>-->
    </div>

    <form class="form-inline my-2 my-lg-0">
        <input type="hidden" id="ip" name="ip" value="127.0.0.1">
        <input type="hidden" id="port" name="port" value="7777">
        <div class="a-col">
            <div class="input-group ">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="service-addon">服务</span>
                </div>
                <select id="selectServer" class="form-control selectpicker"></select>
            </div>
        </div>
        <div class="a-col">
            <div class="input-group ">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="agent-addon">实例</span>
                </div>
                <select id="selectAgent" class="form-control selectpicker"></select>
            </div>
        </div>
        <div class="a-col">
            <button id="connect" title="connect" type="button" class="btn btn-primary form-control" onclick="connectServer()">连接
            </button>
            <button id="disconnect" title="disconnect" type="button" class="btn btn-danger form-control" style="display:none" onclick="disconnectServer()" >断开
            </button>
        </div>
        <div class="a-col">
            <div class="input-group ">
                <input id="connectType" type="checkbox" style="color:white;" checked data-toggle="toggle" data-on="代理" data-off="直连"
                       data-onstyle="success" data-offstyle="warning"/>
            </div>
        </div>
        &nbsp;&nbsp;
        <div class="col-inline">
            <a id="arthasOutputA" style="color:palevioletred;text-decoration: none;" target="_blank" href="arthas-output/" class="btn btn-link" role="button" onclick="updateArthasOutputLink()">
                <i class="fa fa-bar-chart-o"></i>&nbsp;火焰图
            </a>
            <a href="/logout" style="color:black;text-decoration: none;" class="btn btn-link" role="button">
                <i class="fa fa-power-off"></i>&nbsp;注销
            </a>
        </div>
    </form>

</nav>

<div class="container-fluid px-0">
    <div class="col px-0" id="terminal-card">
        <div id="terminal"></div>
    </div>
</div>

<div title="fullscreen" id="fullSc" class="fullSc">
    <button id="fullScBtn" onclick="xtermFullScreen()"><img src="/static/fullsc.png"></button>
</div>
</body>

</html>